<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="head">
                    <div class="headleft">
                        <div style="width:120px">
                            <span>项目名称：</span>
                        </div>
                        <el-input v-model="serach" placeholder="请输入姓名" />
                        <div class="head1">
                            <el-button type="primary" @click="Serachdata">查询</el-button>
                        </div>
                    </div>
                    <div class="headright">
                        <el-button type="primary" @click="add">新增</el-button>
                        <!-- <el-button type="primary" @click="open1">测试</el-button> -->

                    </div>
                </div>
            </el-header>
            <!-- 表格 -->
            <el-main>
                <el-table :data="getProjectData" style="width: 100%">
                    <el-table-column label="序号" width="180">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目名称" width="180">
                        <template #default="scope">
                            {{ scope.row.itemName }}

                        </template>
                    </el-table-column>
                    <el-table-column label="项目类别" width="180">
                        <template #default="scope">

                            {{ scope.row.itemType }}

                        </template>
                    </el-table-column>
                    <el-table-column label="项目单价" width="180">
                        <template #default="scope">

                            {{ scope.row.itemPrice }}

                        </template>
                    </el-table-column>
                    <el-table-column label="项目成本" width="180">
                        <template #default="scope">
                            {{ scope.row.itemCost }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="edit(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="open(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="page">
                    <div>
                        <el-pagination v-model:page-size="pageSize" @current-change="pageChange" background
                    layout="prev, pager, next" :total=store.state.checkProject.tableTotal />
                    </div>
                </div>
                <!-- 新增弹窗 -->
                <!-- <el-dialog v-model="dialogVisible" title="添加检查项目" width="300px" draggable>
                    <div class="add">
                        <div>
                            <span>项目名称：</span>
                            <el-input v-model="adduser.additemName" />
                        </div>
                        <div>
                            <span>项目类别：</span>
                            <el-select v-model="adduser.additemType" class="m-2" placeholder="请选择项目类型">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                        <div>
                            <span>项目单机：</span>
                            <el-input v-model="adduser.additemPrice" />
                        </div>
                        <div>
                            <span>项目成本：</span>
                            <el-input v-model="adduser.additemCost" />
                        </div>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="addpre">
                                保存
                            </el-button>
                        </span>
                    </template>
                </el-dialog> -->

                <!-- 新增加弹窗 -->
                <el-dialog v-model="dialogVisible" title="挂号[退款]">
                    <el-form >
                        <el-form-item label="项目名称" :label-width="formLabelWidth">
                            <el-input v-model="adduser.additemName" />
                        </el-form-item>
                        <el-form-item label="项目类别" :label-width="formLabelWidth">
                            <el-select v-model="adduser.additemType" class="m-2" placeholder="请选择项目类型">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目单价" :label-width="formLabelWidth">
                            <el-input v-model="adduser.additemPrice" />
                        </el-form-item>
                        <el-form-item label="项目成本" :label-width="formLabelWidth">
                            <el-input v-model="adduser.additemCost" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="addpre">
                                保存
                            </el-button>
                        </span>
                    </template>
                </el-dialog>


                <!-- 新编辑弹窗 -->
                <el-dialog v-model="dialogVisible1" title="挂号[退款]">
                    <el-form >
                        <el-form-item label="项目名称" :label-width="formLabelWidth">
                            <el-input v-model="user.edititemName" />
                        </el-form-item>
                        <el-form-item label="项目类别" :label-width="formLabelWidth">
                            <el-select v-model="user.edititemType" class="m-2" placeholder="请选择项目类型">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目单价" :label-width="formLabelWidth">
                            <el-input v-model="user.edititemPrice" />
                        </el-form-item>
                        <el-form-item label="项目成本" :label-width="formLabelWidth">
                            <el-input v-model="user.edititemCost" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="saveEdit">
                                保存
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onBeforeMount } from 'vue';
import axios from '@/utils/http'
import { useStore, mapMutations, mapGetters } from 'vuex';
const store = useStore();
// store.state.checkProject.xxx
const serach = ref('')
const user = ref({ editemId: '', edititemName: '', edititemType: "", edititemCost: '', edititemNuit: '', edititemPrice: '' })
const adduser = ref({
    additemName: '', additemType: "", additemCost: '', additemNuit: '', additemPrice: ''
})
const input = ref('')
const tableData = ref('')
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const formLabelWidth = "140px";
const currentpage1=ref(1)

// 测试样式
const open1 = () => {

    ElMessageBox.confirm(
        '确认删除吗？',
        '温馨提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })


        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}

const getProjectData = computed(
    mapGetters(["getProjectData"]).getProjectData.bind({
        $store: store,
    })
);
const setProjectData = mapMutations(["setProjectData"]).setProjectData.bind({
    $store: store,
});
// 循环渲染项目名字
const options1 = computed(mapGetters(["getOption"]).getOption.bind({
    $store: store,
}))


const delProjectData = mapMutations(["delProjectData"]).delProjectData.bind({
    $store: store,
});
// 删除函数接口
const open = (row: any) => {
    ElMessageBox.confirm(
        '确认删除吗？',
        '温馨提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            console.log(row.id);
            delProjectData(row)
            setProjectData(
                {
                    currentPage:  currentpage1.value,
                    pageSize: pageSize.value
                }
            )
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}


// 接口请求渲染表格
const data: any = ref("")
const pageSize: any = ref(5)
// 页面方法
const pageChange = (currentPage: any) => {
    currentpage1.value=currentPage
    setProjectData(
        {
            currentPage: currentPage,
            pageSize: pageSize.value
        }
    )
}
onBeforeMount(
    () => {
        setProjectData({
            currentPage: 1,
            pageSize: pageSize.value
        })
    }
)

// 搜索接口
const searchProjectData = mapMutations(["searchProjectData"]).searchProjectData.bind({
    $store: store,
});
const Serachdata = () => {
    // console.log(serach.value);
    searchProjectData(
        {
            currentPage: 1,
            pageSize: pageSize.value,
            serachValue: serach.value
        });
    // editProjectData()

}


// 编辑渲染接口函数
const editProjectData = mapMutations(["editProjectData"]).editProjectData.bind({
    $store: store,
});
const edit = (row: any) => {

    dialogVisible1.value = true
    editProjectData()
    user.value.edititemName = row.itemName
    user.value.edititemCost = row.itemCost
    user.value.edititemPrice = row.itemPrice
    user.value.edititemType = row.itemType
    user.value.editemId = row.id

}

// 编辑保存接口函数
const saveProjectData = mapMutations(["saveProjectData"]).saveProjectData.bind({
    $store: store,
});
const saveEdit = (row: any) => {
    if (!user.value.edititemName || !user.value.edititemType ||
        !user.value.edititemPrice || !user.value.edititemCost) {
        ElMessage({
            showClose: true,
            message: '名称，类别，单价，成本输入框都必填',
            type: 'warning',
        })
    }
    else {
        ElMessageBox.confirm(
            '确认保存吗？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',

            }
        )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '保存成功',
                })
                dialogVisible1.value = false
                saveProjectData({
                    "id": user.value.editemId,
                    "itemName": user.value.edititemName,
                    "itemType": user.value.edititemType,
                    "itemPrice": Number(user.value.edititemPrice),
                    "itemCost": Number(user.value.edititemCost),

                })

                setProjectData(
                    {
                        currentPage:  currentpage1.value,
                        pageSize: pageSize.value
                    }
                )
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }


}

// 添加接口
const add = () => {
    editProjectData()
    dialogVisible.value = true
    adduser.value.additemName = ""
    adduser.value.additemCost = ""
    adduser.value.additemPrice = ""
    adduser.value.additemType = ""
}
const addProjectData = mapMutations(["addProjectData"]).addProjectData.bind({
    $store: store,
});
const addpre = () => {
   

    if (!adduser.value.additemName || !adduser.value.additemType ||
        !adduser.value.additemPrice || !adduser.value.additemCost) {
        ElMessage({
            showClose: true,
            message: '名称，类别，单价，成本一个都不能为空',
            type: 'warning',
        })
    }
    else {
        ElMessageBox.confirm(
            '确认保存吗？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',

            }
        )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '保存成功',
                })
                dialogVisible.value = false
                addProjectData(
                    {
                        "itemName": adduser.value.additemName,
                        "itemType": adduser.value.additemType,
                        "itemPrice": Number(adduser.value.additemPrice),
                        "itemCost": Number(adduser.value.additemCost),

                    }
                )
                setProjectData(
                    {
                        currentPage:  currentpage1.value,
                        pageSize: pageSize.value
                    }
                )
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }


}
</script>

<style scoped>
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #676a6d;
    background-color: #f3f5f8;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "sans-serif";
    color: #676a6d;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
    width: 1240px;
    /* margin-left: -200px; */

}

.headleft {
    padding-left: 10px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.head1 {
    margin-left: 10px;
}

.headright {
    padding-right: 10px;
}

.add {
    font-family: "sans-serif";
    color: #676a6d;
    width: 280px;
}

.el-input {
    width: 210px;
    height: 34px;
}
.page{
  margin-top: 30px;
  margin-right: 110px;
  display: flex;
  justify-content: center;
}
</style>